import React, { Component, ComponentClass } from 'react';
import Taro from '@tarojs/taro';
import {connect} from 'react-redux';
import {AtIcon, AtSearchBar} from 'taro-ui'
import {View, Text} from '@tarojs/components'
import {CityLocation as CityLocationType} from '../../utils/server.interface'
import '../location.scss'

type PageStateProps = {
  location: CityLocationType
  kdIsShow: boolean
}
type PageDispatchProps = {}
type PageOwnProps = {
  isCityLocationTwo?: any
  placeholderText?: any
  customClass?: any
  locations?: any
  location?: any
  onCallBackParent?: any
  onCallBackActionClick?: any
  onClearClick?: any
  local?: any
  bgColor?: string
  style?: string
  type?: string
  separationLine?: any
  cityColor?: any
  cityFont?: any
  searchColor?: any
  searchFont?: any
}
type PageState = {}
type IProps = PageStateProps & PageDispatchProps & PageOwnProps

interface CityLocation {
  props: IProps
}

@connect(({location}) => ({
  location,
}), () => ({}))

class CityLocation extends Component {
  static defaultProps = {
    bgColor: "white",
    location: '',
    locations: '',
    cityColor: '#666',
    cityFont: '12px',
    searchColor: '#666',
    searchFont: '12px',
    separationLine: true,
    isCityLocationTwo: false,
    style: '',
    placeholderText: '搜索关键词',
    type: ''
  }
  state: {
    value: any
  } = {
    value: ''
  }

  onChange(value) {
    this.setState({
      value: value
    })
    // 这里要注意：setState 是一个异步方法，所以需要操作缓存的当前值
    this.props.onCallBackParent(value);
  }

  onActionClick() {
    this.props.onCallBackActionClick();
  }

  onClearClick() {
    this.setState({value: ''})
    this.props.onClearClick && this.props.onClearClick();
  }

  render() {
    const {local, location, locations, type, bgColor, style, isCityLocationTwo, placeholderText, customClass, separationLine, cityColor, cityFont, searchColor, searchFont} = this.props
    const {value} = this.state
    return (<View className={`${isCityLocationTwo && 'cityLocationRoot-two'} ${customClass || ''}`}
      style='position: relative; z-index: 99;'
    >
        <View className='cityLocationRoot'
          style={`background-color:${bgColor};${style};z-index:99`}
        >
          {process.env.P_ENV !== 'lx' &&
          <View className='city' style={`color: ${cityColor};font-size: ${cityFont}`}
            onClick={() => {
                  Taro.navigateTo({url: type == 'lianlian' ? '/other/select-city/select-city-local' : '/other/select-city/select-city'})
                }}
          >
            <View>{(locations && locations.area_name) || location.area_name}</View>
            <View className='m-l-ten'><AtIcon value='chevron-down' customStyle='font-size: 12px' size='12' /></View>
          </View>}
          {(!local) && <View className='search' onClick={() => {
            Taro.navigateTo({url: '/common/search/search'})
          }} style={`color: ${searchColor};font-size: ${searchFont}`}
          >
            {separationLine && process.env.P_ENV !== 'lx' && <View className='m-l-ten'>
              <Text className='icon__h' />
            </View>}
            <View className='m-l-ten'>
              <AtIcon value='search' size='16' customStyle='font-size: 16px' />
            </View>
            <View className='m-l-ten'>{placeholderText}</View>
          </View>}
          {(local) && <View style='width:77%'>
            <AtSearchBar
              value={value}
              showActionButton={false}
              placeholder={placeholderText}
              onActionClick={this.onActionClick.bind(this)}
              onClear={this.onClearClick.bind(this)}
              onConfirm={this.onActionClick.bind(this)}
              onChange={this.onChange.bind(this)}
            />
          </View>}
        </View>
      </View>
    )
  }
}

export default CityLocation as ComponentClass<PageOwnProps, PageState>
